import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table, Switch, Popover, Icon, Popconfirm } from 'antd';
import _ from 'lodash';
import './index.less';

const prefixCls = 'passive-detection-table';

class PassiveDetectionTable extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { data, loading, pagination, onEdit, onChangeStatus } = this.props;
    const columns = [
      {
        title: 'ip地址',
        dataIndex: 'ip',
        width: '20%'
      },
      {
        title: '名称',
        dataIndex: 'name',
        width: '20%'
      },
      {
        title: (
          <div>
            筛选目标
            <Popover
              overlayStyle={{ width: 270 }}
              content={
                '系统如果从流量中发现筛选目标中的IP，会自动更新到资产管理列表；如果不设置筛选目标，系统会将从流量中解析到的所有IP更新到资产管理列表。'
              }
            >
              <Icon type="info-circle" style={{ marginLeft: 4, color: '#999EA8' }} />
            </Popover>
          </div>
        ),
        dataIndex: 'filterCondition',
        width: '22%',
        render: filterCondition => {
          let data = Array.isArray(filterCondition) ? [...filterCondition] : [];
          _.get(data, 'length', 0) > 3 && data.splice(3, 1, '......');
          return (
            <div>
              {_.get(data, 'length', 0) > 0
                ? data.map((item, index) => {
                    return (
                      <div key={index} className={`${prefixCls}-ports-div`}>
                        {item}
                      </div>
                    );
                  })
                : '-'}
            </div>
          );
        }
      },
      {
        title: (
          <div>
            接收状态
            <Popover
              overlayStyle={{ width: 270 }}
              content="关闭开关，将不再接收该被动探测引擎流量。"
            >
              <Icon type="info-circle" style={{ marginLeft: 4, color: '#999EA8' }} />
            </Popover>
          </div>
        ),
        key: 'status',
        width: '22%',
        render: row => {
          const status = _.get(row, 'status');
          return (
            <Popconfirm
              title={`确定${status ? '不再接收' : '接收'}该引擎流量吗？`}
              onConfirm={() => {
                onChangeStatus(row);
              }}
              onCancel
              okText="确定"
              cancelText="取消"
            >
              <Switch checked={status} />
            </Popconfirm>
          );
        }
      },
      {
        title: '操作',
        key: 'operations',
        render: row => {
          const operations = (
            <div className={`${prefixCls}-operate`}>
              <span className={`${prefixCls}-edit`} onClick={() => onEdit(row)}>
                编辑
              </span>
            </div>
          );
          return operations;
        }
      }
    ];
    return (
      <Table
        className={prefixCls}
        columns={columns}
        loading={loading}
        dataSource={data}
        pagination={pagination}
      />
    );
  }
}

PassiveDetectionTable.propTypes = {
  data: PropTypes.array,
  loading: PropTypes.bool,
  pagination: PropTypes.object,
  onEdit: PropTypes.func,
  onChangeStatus: PropTypes.func
};

export default PassiveDetectionTable;
